<template>
	<view class="msg_audio" @tap.stop="play" :class="{playing:playing}" :style="{width:`${width}rpx`}">
		<view class="lines">
			<view class="line line-s">
				
			</view>
			<view class="line line-m">
				
			</view>
			<view class="line line-l">
				
			</view>
		</view>
		<text class="num">{{info.duration|second}}″</text>
	</view>
</template>

<script>
	import player from "@/player/audio.js"
	export default{
		data(){
			return{
				playing:false
			}
		},
		props:{
			info:{
				type:Object,
				required:true
			}
		},
		computed:{
			width(){
				return 200+0.003333*this.info.duration
			}
		},
		filters:{
			second(long){
				return Math.floor(long/1000)
			}
		},
		beforeDestroy() {
			if(this.playing){
				player.stop()
			}
		},
		methods:{
			play(){
				player.oncePlay(
					this.info.voiceUrl,
					()=>{
						this.playing = true
					},
					()=>{
						this.playing = false
					},
					()=>{
						this.playing = false
					}
				)
			}
		}
	}
</script>
<style lang="scss" scoped>
	@keyframes line-m{
		0%{
			opacity: 0;
		}
		25%{
			opacity: 1;
		}
		50%{
			opacity: 1;
		}
		100%{
			opacity: 1;
		}
	}
	@keyframes line-l{
		0%{
			opacity: 0;
		}
		25%{
			opacity: 0;
		}
		50%{
			opacity: 1;
		}
		100%{
			opacity: 1;
		}
	}
	.msg_audio{
		position: relative;
		padding: 14rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		min-width: 200rpx;
		max-width: 400rpx;
		border-radius: 0 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&::before{
			position: absolute;
			content: '';
			border-width: 10rpx;
			border-style: solid;
			border-color: #FFFFFF #FFFFFF transparent transparent;
			top: 0;
			left: -8rpx;
		}
		.lines{
			order: 1;
			display: flex;
			align-items: center;
		}
		.line{
			width: 4rpx;
			background-color: $uni-color-primary;
			border-radius: 4rpx;
		}
		.line-s{
			order: 1;
			height: 10rpx;
		}
		.line-m{
			order: 2;
			height: 20rpx;
			margin: 0 6rpx;
		}
		.line-l{
			order: 3;
			height: 30rpx;
		}
		.num{
			order: 2;
		}
		&.playing{
			.line-m{
				animation-name: line-m;
				animation-duration: 1.6s;
				animation-iteration-count: infinite;
				animation-timing-function: steps(1);
			}
			.line-l{
				animation-name: line-l;
				animation-duration: 1.6s;
				animation-iteration-count: infinite;
				animation-timing-function: steps(1);
			}
		}
	}
	.self{
		.msg_audio{
			background-color: #cfe7ff;
			border-radius: 10rpx 0 10rpx 10rpx;
			.lines{
				order: 2;
			}
			.num{
				order: 1;
			}
			.line{
				background-color: $uni-text-color;
			}
			.line-s{
				order: 3;
				height: 10rpx;
			}
			.line-l{
				order: 1;
				height: 30rpx;
			}
			&::before{
				content: none;
			}
			&::after{
				position: absolute;
				content: '';
				border-width: 10rpx;
				border-style: solid;
				border-color: #cfe7ff transparent transparent  #cfe7ff;
				top: 0;
				right: -8rpx;
			}
		}
	}
</style>
